<template>
  <div class="page">
    <el-dialog title="提交审核" :visible.sync="dialogVisible2" width="400px">
      <input
        type="file"
        id="imageFile"
        name="imageFile"
        accept="video/*"
        style="width: 200px"
        @change="uploadImage($event, item)"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="list">
      <div class="li">
        <div class="">
          1、上传注册图
          <el-button @click="pic1 = ''">清空图片</el-button>
        </div>
        <div class="upload">
          <img src="@/assets/f09f17a31447617912d6a96d568b14a.jpg" alt="" />

          <div class="avatar">
            <img v-if="pic1" :src="pic1" style="width: 100%" />
            <input
              v-else
              type="file"
              id="imageFile"
              name="imageFile"
              style="width: 200px"
              @change="uploadImage($event, 'pic1')"
            />
          </div>
        </div>
      </div>
      <div class="li">
        <div class="">
          2、实名成功图
          <el-button @click="pic2 = ''">清空图片</el-button>
        </div>
        <div class="upload">
          <img src="@/assets/3ef85295570adffb186f5379d0216dc.jpg" alt="" />
          <div class="avatar">
            <img v-if="pic2" :src="pic2" style="width: 100%" />
            <input
              v-else
              type="file"
              id="imageFile"
              name="imageFile"
              style="width: 200px"
              @change="uploadImage($event, 'pic2')"
            />
          </div>
        </div>
      </div>
      <div class="li">
        <div class="">3、账号</div>
        <div class="upload">
          <el-input v-model="msg" placeholder=""></el-input>
        </div>
      </div>

      <el-button
        type="primary"
        style="width: 100%; margin-top: 20px"
        @click="createOrder"
        >提交表单</el-button
      >
    </div>
  </div>
</template>
<script>
import comm from "@/mixins/comm.js";
import { Loading } from "element-ui";
export default {
  mixins: [comm],
  data() {
    return {
      step: 1,
      dialogVisible2: false,
      fullscreenLoading: true,
      ruleForm: {
        password: "",
        payPassword: "",
        account: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入K宝密码", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入K宝账号", trigger: "blur" },
        ],
        payPassword: [
          { required: true, message: "请输入K宝支付密码", trigger: "blur" },
        ],
      },
      pic1: "",
      pic2: "",
      msg: "",
      tableData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const data = localStorage.getItem("pandaSms_user");
      if (data) {
        this.phone = JSON.parse(data).phone;
      }

      this.getList();
    },
    async clickstep() {},
    gosms(id) {
      this.$router.push({
        name: "smsList",
        query: {
          id, // 参数1
        },
      });
    },
    sendsms(item) {
      const data = item.datalist.split(",");
      this.sms = item.sms;
      this.datalist = data;
      this.dialogVisible = true;
    },
    submit(item) {
      this.dialogVisible2 = true;
      this.changeItem = item;
      this.checkmp4 = "";
    },
    handleAvatarSuccess(e) {
      console.log(e, "ee");
    },
    uploadImage(e, key) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("files", file);

      // 打开 Loading
      const loading = Loading.service({
        lock: true, // 锁定屏幕
        text: "上传中...", // 加载文案
        background: "rgba(0, 0, 0, 0.7)", // 背景颜色
      });

      this.$sdk
        .post("/upload", formData, {})
        .then((res2) => {
          this.fullscreenLoading = false;
          const res = res2.data;
          loading.close();

          if (!res.code) {
            this[key] = res.img;
            this.$message("上传图片成功");
          } else {
            this.$message("上传图片失败");
          }
        })
        .catch(function (error) {
          this.fullscreenLoading = false;
          alert(error);
        });
    },

    getList() {
      const date = new Date();

      this.$sdk
        .post(
          "/getsmsorder",
          {
            date: `${date.getFullYear()}-${
              date.getMonth() + 1
            }-${date.getDate()}`,
            status: "0",
          },
          {}
        )
        .then((res2) => {
          console.log(res2);
          if (res2.data && !res2.data.code) {
            const data = res2.data.data;
            this.tableData = data;
          }
        })
        .catch(function (error) {
          alert(error);
        });
    },
    getSmsData() {
      const now = new Date();
      const hour = now.getHours();
      if (hour >= 10 && hour < 19) {
        //
        this.getList();
      } else {
        this.$msgError("数据领取时间早上 10:00 - 晚上 19:00 ");
      }
    },
    getRw(item) {
      this.$sdk
        .post(
          "/setsmsorder",
          {
            phone: this.phone,
            orderid: item.id,
          },
          {}
        )
        .then((res2) => {
          console.log(res2);

          this.$msgError(res2.data.msg || "领取失败");
          this.getList();
        })
        .catch(function (error) {
          alert(error);
        });
    },

    createOrder() {
      if (!this.msg || !this.pic1 || !this.pic2) {
        this.$msgError("请补充完成表单");
        return;
      }
      if (!this.phone) {
        this.$msgError("请登录");
        return;
      }
      this.$sdk
        .post(
          "/createSmsOrder",
          {
            msg: this.msg,
            pic1: this.pic1,
            pic2: this.pic2,
            phone: this.phone,
          },
          {}
        )
        .then((res) => {
          // this.$message.
          console.log(res);
          this.$msgOk("提交成功");
          this.msg = "";
          this.pic1 = "";
          this.pic2 = "";
        });
    },

    submitForm() {
      if (this.checkmp4 && this.changeItem) {
        const a = this.$sdk.post(
          "/changesmsorder",
          {
            id: this.changeItem.id,
            key: "status",
            val: "2",
          },
          {}
        );
        const b = this.$sdk.post(
          "/changesmsorder",
          {
            id: this.changeItem.id,
            key: "checkmp4",
            val: this.checkmp4,
          },
          {}
        );

        Promise.all([a, b]).then((...res) => {
          console.log(res);
          this.dialogVisible2 = false;
          this.getList();
        });
      }
    },
    pTime(d) {
      const currentDate = new Date(d);
      const year = currentDate.getFullYear(); // 例如：2025

      // 获取月份（注意：月份是从 0 开始的，0 表示 1 月）
      const month = currentDate.getMonth() + 1; // 例如：3（表示 4 月）

      // 获取日期（1 到 31）
      const day = currentDate.getDate(); // 例如：11

      // 拼接成“年月日”格式
      const formattedDate = `${year}-${String(month).padStart(2, "0")}-${String(
        day
      ).padStart(
        2,
        "0"
      )} ${currentDate.getHours()}:${currentDate.getMinutes()}`;

      return formattedDate;
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  padding: 10px;
  position: relative;
  .t-page {
    background: #fff;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }
  .box {
    font-size: 13px;
    .list {
      margin-bottom: 8px;
      img {
        width: 60%;
        margin-top: 5px;
      }
    }
  }
  .btn {
    text-align: center;
  }
}
</style>
